<template>
    <el-container style="height: 100%;">
        <el-header style="height:100px;">
            <el-col :span="6" class="title">
                <div style="width: 100%; height: 100%;padding: 1px;">
                    <el-image src="../../static/img/logo.png" alt="" fit="cover"></el-image>
                </div>
            </el-col>
            <el-col :span="16">
                <menuBar style="float: right;"></menuBar>
            </el-col>
            <el-col :span="2" class="title">
                <el-button v-if="!ifInEnglish" size="mini" type="success" @click="handleSetLanguage"
                           style="margin-top: 28px;margin-left: 20px;">EN
                </el-button>
                <el-button v-if="ifInEnglish" size="mini" type="success" @click="handleSetLanguage"
                           style="margin-top: 28px;margin-left: 20px;">CH
                </el-button>
            </el-col>
        </el-header>
        <el-main style="width: 100%;padding:0">
            <div id="mainContent" style="width: 100%;min-height: 500px">
                <router-view></router-view>
            </div>
            <div id="footer" v-if="this.$globalConstant.page==''"
                 style="width:100%; height:230px; margin-top:20px; background-image: url(../../static/img/footer_bg.png);">
                <el-row style="height: 85%; margin-bottom: 0;">
                    <el-col :span="11" :offset="1">
                        <div style="width: 100%; height: 100%; padding: 1px;">
                            <el-image src="../../static/img/foot-logo.png" alt="" fit="cover"
                                      style="margin-top:7%;margin-left: 5%"></el-image>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <!--<div style="width: 100%; height: 100%;padding: 1px;">-->
                        <!--TEL-->
                        <!--</div>-->
                        <el-form>
                            <el-form-item :label="$t('menuName.contact')" id="item1">
                            </el-form-item>
                            <el-form-item :label="$t('menuName.add')" class="item2">
                                <p>{{$t("menuName.address")}}</p>
                            </el-form-item>
                            <el-form-item :label="$t('menuName.postcode')" class="item2">
                                <p>310027</p>
                            </el-form-item>
                            <el-form-item :label="$t('menuName.tel')" class="item2">
                                <p>+86-571-87952453</p>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="4">
                        <div style="width: 100%; height: 100%;padding: 1px;">
                            <el-select v-model="value" :placeholder="$t('menuName.links')" style="margin-top: 10%">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="height: 10%; margin-bottom: 0;text-align: center">
                    <p style="color: white;margin-bottom: 0;display: inline-block">版权所有Copyright © 浙江大学地球科学学院</p>
                </el-row>
            </div>
        </el-main>

    </el-container>
</template>
<script>

    import menuBar from './menuBar'

    export default {
        components: {
            menuBar,
        },
        data() {
            return {
                ifInEnglish: false,
                searchParam: '',
                options: [{
                    value: '选项1',
                    label: '浙江大学主页'
                }, {
                    value: '选项2',
                    label: '浙江大学办公网'
                }, {
                    value: '选项3',
                    label: '浙江大学理学院'
                }],
                value: ''
            }
        },
        methods: {
            handleSetLanguage() {
                if (this.ifInEnglish) {//中文
                    localStorage.setItem('locale', 'zh');
                    this.$i18n.locale = localStorage.getItem('locale');
                    this.ifInEnglish=false;
                } else {//英文
                    localStorage.setItem('locale', 'en');
                    this.$i18n.locale = localStorage.getItem('locale');
                    this.ifInEnglish=true;
                }
                this.$Bus.$emit('changeLan');
            }
        },
        computed: {},
        mounted() {
            this.$store.dispatch('initial', {})
        }
    }
</script>

<style>
    /*.international-icon {*/
    /*font-size: 22px;*/
    /*cursor: pointer;*/
    /*vertical-align: -5px!important;*/
    /*}*/
    /*.el-dropdown{*/
    /*color:#5a5e66;*/
    /*}*/
    html, body {
        /*修改整体页面的overflow*/
        /*overflow: auto;*/
        overflow: hidden;
        height: 100%;
    }

    .title {
        text-align: center;
        line-height: 100%;
        color: #2d2f33;
    }

    .el-form-item {
        margin-bottom: 0px;
    }

    #item1 .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 20px;
        color: white;
        line-height: 60px;
        padding: 0 12px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .item2 .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 15px;
        color: white;
        line-height: 30px;
        padding: 0 12px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .el-form-item__content {
        line-height: 30px;
        position: relative;
        font-size: 15px;
        color: white;
    }
    p {
        margin-bottom: 0px;
    }
</style>
